<template>
  <div>
    <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); width:800px;margin-left:100px;">
      <br>
      <el-table
          :data="count"
          :row-class-name="rowClassName"
          :stripe="true"
          style="width: 100%"
          align="center">
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.xh }}
          </template>
        </el-table-column>
        <el-table-column label="名称" width="180" align="center">
          <template slot-scope="scope">
            {{ count[scope.row.xh - 1].countName }}
          </template>
        </el-table-column>

        <el-table-column label="数量" width="150" align="center">
          <template slot-scope="scope">
            {{ count[scope.row.xh - 1].countNumber }}
          </template>
        </el-table-column>
        <el-table-column label="添加" width="150" align="center">
          <template slot-scope="scope">
            <el-button type="primary" round size="small" @click="add(scope.row.xh,count[scope.row.xh-1].countName)"><i
                class="el-icon-collection"></i> 添加题目
            </el-button>
          </template>
        </el-table-column>

        <el-table-column label="删除全部" width="150" align="center">
          <template slot-scope="scope">
            <el-button type="danger" round size="small" @click="remove(scope.row.xh,count[scope.row.xh-1].countName)"><i
                class="el-icon-delete"></i> 删除全部题目
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <el-button type="primary" round style="margin-left:330px" @click="all()"><i class="el-icon-collection"></i>添加所有</el-button>
      <el-button type="danger" round style="margin-left:120px" @click="rmall()"><i class="el-icon-delete"></i>移除所有题目
      </el-button>
      <br>
      <br>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Count",
  data() {
    return {
      count: [
        {
          countName: "随机算式",
          countNumber: 0
        },
        {
          countName: "加法算式",
          countNumber: 0
        },
        {
          countName: "减法算式",
          countNumber: 0
        },
        {
          countName: "乘法算式",
          countNumber: 0
        },
        {
          countName: "除法算式",
          countNumber: 0
        }
      ],
      password: "admin",
    };
  },
  created() {
    console.log(localStorage.token);
    //后台操作密码逻辑
    if (localStorage.token !== "success") {
      this.$prompt('请输入密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputErrorMessage: '密码不正确',
        type : 'password',
      }).then(({value}) => {
        if (value === this.password) {
          localStorage.token = "success";
          this.$message({
            type: 'success',
            message: '验证成功！'
          });
        } else {
          this.$message({
            type: 'error',
            message: '密码验证错误，请重新输入',
          });
          window.location.reload();
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入,跳转到随机测试页面'
        });
        this.$router.push({path: "/"});
      });
    }

  },
  beforeCreate() {
    //取得后台算式总量
    axios.get("http://localhost:8090/allNumber").then(response => (this.count[0].countNumber = response.data));
    axios.get("http://localhost:8090/getAdditionNumber").then(response => (this.count[1].countNumber = response.data));
    axios.get("http://localhost:8090/getDivisionNumber").then(response => (this.count[2].countNumber = response.data));
    axios.get("http://localhost:8090/getMultiplicationNumber").then(response => (this.count[3].countNumber = response.data));
    axios.get("http://localhost:8090/getSubtractionNumber").then(response => (this.count[4].countNumber = response.data));
  },
  beforeDestroy() {
    //关闭页面取消保存的密码，重新打开需要再次输入浏览器
    localStorage.token = "destroy";
  },
  methods: {
    // 计算每一行的数据
    rowClassName({row, rowIndex}) {
      row.xh = rowIndex + 1;
    },
    //添加题目方法
    add(id, name) {
      this.$confirm("是否添加" + name + "的数量", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      }).then(() => {
        if (id === 1) {
          axios.get('http://localhost:8090/addRandom').then(function (response) {
            console.log('成功');
            window.location.reload();
          })
              .catch(function (error) {
                console.log('失败');
              });
          this.$message({
            type: "success",
            message: "添加成功!"
          });
        } else if (id === 2) {
          axios.get('http://localhost:8090/addAddition').then(function (response) {
            console.log('成功');
            window.location.reload();
          })
              .catch(function (error) {
                console.log('失败');
              });
          this.$message({
            type: "success",
            message: "添加成功!"
          });
        } else if (id === 3) {
          axios.get('http://localhost:8090/addDivision').then(function (response) {
            console.log('成功');
            window.location.reload();
          })
              .catch(function (error) {
                console.log('失败');
              });
          this.$message({
            type: "success",
            message: "添加成功!"
          });
        } else if (id === 4) {
          axios.get('http://localhost:8090/addMultiplication').then(function (response) {
            console.log('成功');
            window.location.reload();
          })
              .catch(function (error) {
                console.log('失败');
              });
          this.$message({
            type: "success",
            message: "添加成功!"
          });
        } else if (id === 5) {
          axios.get('http://localhost:8090/addSubtraction').then(function (response) {
            console.log('成功');
            window.location.reload();
          })
              .catch(function (error) {
                console.log('失败');
              });
          this.$message({
            type: "success",
            message: "添加成功!"
          });
        }
      })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
    },
    //移除所有题目集方法
    remove(id, name) {
      this.$confirm("是否清空" + name + "的所有内容", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (id === 1) {
          axios.get('http://localhost:8090/removeAll').then(function () {
            console.log('成功');
            //移除全部错题的时候移除错题集内容
            axios.get('http://localhost:8090/removeWrongAll');
            window.location.reload();
          })
              .catch(function (error) {
                console.log('失败');
              });
          this.$message({
            type: "success",
            message: "清除成功!"
          });
        } else if (id === 2) {
          axios.get('http://localhost:8090/removeAddition').then(function () {
            console.log('成功');
            window.location.reload();
          })
              .catch(function (error) {
                console.log('失败');
              });
          this.$message({
            type: "success",
            message: "添加成功!"
          });
        } else if (id === 3) {
          axios.get('http://localhost:8090/removeDivision').then(function (response) {
            console.log('成功');
            window.location.reload();
          })
              .catch(function (error) {
                console.log('失败');
              });
          this.$message({
            type: "success",
            message: "添加成功!"
          });
        } else if (id === 4) {
          axios.get('http://localhost:8090/removeMultiplication').then(function (response) {
            console.log('成功');
            window.location.reload();
          })
              .catch(function (error) {
                console.log('失败');
              });
          this.$message({
            type: "success",
            message: "添加成功!"
          });
        } else if (id === 5) {
          axios.get('http://localhost:8090/removeSubtraction').then(function (response) {
            console.log('成功');
            window.location.reload();
          })
              .catch(function (error) {
                console.log('失败');
              });
          this.$message({
            type: "success",
            message: "添加成功!"
          });
        }
      })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
    },
    all(){
      this.$confirm("是否添加全部题目的数量", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      }).then(() => {
        axios.get('http://localhost:8090/addRandom');
        axios.get('http://localhost:8090/addAddition');
        axios.get('http://localhost:8090/addDivision');
        axios.get('http://localhost:8090/addMultiplication');
        axios.get('http://localhost:8090/addSubtraction').then(function (response) {
          console.log('成功');
          window.location.reload();
        })
            .catch(function () {
              console.log('失败');
            });
        this.$message({
          type: "success",
          message: "添加成功!"
        });
      })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
    },
    rmall(){
      this.$confirm("是否移除所有题目集", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      }).then(() => {
        axios.get('http://localhost:8090/removeWrongAll'); // 移除错题集
        axios.get('http://localhost:8090/removeAll');
        axios.get('http://localhost:8090/removeAddition');
        axios.get('http://localhost:8090/removeDivision');
        axios.get('http://localhost:8090/removeMultiplication');
        axios.get('http://localhost:8090/removeSubtraction').then(function (response) {
          console.log('成功');
          window.location.reload();
        })
            .catch(function () {
              console.log('失败');
            });
        this.$message({
          type: "success",
          message: "添加成功!"
        });
      })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
    },
  }
}
</script>